import React from 'react';
import './crmGood.less';
import { Layout, Breadcrumb, Icon, Button, Table, Input, Select, Form, Pagination, message, TreeSelect } from 'antd';
import $ from 'jquery';
import Config from '../../common/config';

const FormItem = Form.Item;
const config = new Config();
const { Header, Content, Footer, Sider } = Layout;
const Option = Select.Option;
const InputGroup = Input.Group;
const token = sessionStorage.getItem('token');


class CrmGoodForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            goodsinfolist: [],//时空商品信息
            goodsinfocount: 0,//时空商品条数
            pagesize: 20,// 每页显示的页数
            pageindex: 1,// 当前页
            Inkey: "",// 药品名称
            Inkeybrand: '',// 品牌
            salestatus: "",//状态
            categoryid: "",//分类
            categoryData: [], //所有分类
        }
    }

    componentDidMount() {
        this.GetSKproductList();
        this.getCategory();
    }

    //分类列表
    getCategory() {
        $.ajax({
            url: `${config.JuseGoods}/categories_sk/GetCategoryList`,
            type: "post",
            headers: { Authorization: 'Bearer ' + token },
            data: {
                categoryname: "",
                isenabled: 1,
            },
            async: true,
            success: res => {
                // console.log('分类列表', res);
                if (res.code === 200) {
                    const data = res.data;
                    if (data.length > 0) {
                        data.forEach((fele) => {
                            fele.key = fele.categoryid;
                            fele.value = fele.categoryid;
                            fele.label = fele.categoryname;
                            fele.children.forEach((sele) => {
                                sele.key = sele.categoryid;
                                sele.value = sele.categoryid;
                                sele.label = sele.categoryname;
                            })
                        });
                        this.setState({
                            categoryData: data,
                        });
                    } else {
                        this.setState({
                            categoryData: data,
                        });
                    }
                } else {
                    message.error('获取全部分类信息失败，请返回重新操作', 2);
                }
            }
        });
    }

    //时空商品信息列表
    GetSKproductList() {
        $.ajax({
            url: `${config.JuseGoods}/products/GetZXproductList`,
            type: "post",
            headers: { Authorization: 'Bearer ' + token },
            data: {
                pagesize: this.state.pagesize,
                pageindex: this.state.pageindex,
                productname: this.state.Inkey,//药品名称
                brandname: this.state.Inkeybrand,//品牌
                salestatus: this.state.salestatus,//状态
                categoryid: this.state.categoryid
            },
            async: true,
            success: res => {
                console.log({
                    pagesize: this.state.pagesize,
                    pageindex: this.state.pageindex,
                    productname: this.state.Inkey,//药品名称
                    brandname: this.state.Inkeybrand,//品牌
                    salestatus: this.state.salestatus == "请选择" ? '' : this.state.salestatus,//状态
                    categoryid: this.state.categoryid
                });
                if (res.code === 200) {
                    this.setState({
                        goodsinfolist: res.data,
                        goodsinfocount: res.datacount,
                    });
                } else {
                    message.config({ top: 80, });
                    message.error('时空商品信息加载失败，请返回重新操作', 2);
                }
            }
        });
    }
    // 分页
    changePage(pageindex) {
        this.setState({
            pageindex
        }, () => {
            this.GetSKproductList();
        });
    }

    //改变每页条数
    handleSizeChange(current, pageSize) {
        this.setState({
            pageindex: 1,
            pagesize: pageSize
        }, () => {
            this.GetSKproductList();
        });
    }

    //选择分类
    changeCategory(value) {
        this.setState({
            categoryid: value
        })
    }

    //状态的改变事件
    salestatusChange(v) {
        this.setState({
            salestatus: v
        });
    }


    //搜索
    SearchProductInfoBtn(e) {
        const form = this.props.form;
        this.setState({
            pageindex: 1,
            Inkey: form.getFieldValue('txt_Inkey'),
            Inkeybrand: form.getFieldValue('txtx_Inkey'),
        }, () => {
            this.GetSKproductList()
        });
    }

    //重置
    ResetBtn() {
        this.props.form.resetFields();
        this.setState({
            pageindex:1,
            Inkey:'',
            Inkeybrand:'',
            salestatus:'',
            categoryid:''
        }, () => {
            this.GetSKproductList()
        });
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        const columns = [{
            title: '药品内码',
            dataIndex: 'productnumber',
            width: '8%',
            render: (text, record) => {
                if (record.beactive == "N") {
                    return <div className='rowchangecolor'>{text}</div>;
                } else {
                    return <div>{text}</div>;
                }
            }
        }, {
            title: '药品名称',
            dataIndex: 'productname',
            width: '9%',
            render: (text, record) => {
                if (record.beactive == "N") {
                    return <div className='rowchangecolor'>{text}</div>;
                } else {
                    return <div>{text}</div>;
                }
            }
        }, {
            title: '分类',
            dataIndex: 'categoryname',
            width: '6%',
            render: (text, record) => {
                if (record.beactive == "N") {
                    return <div className='rowchangecolor'>{text}</div>;
                } else {
                    return <div>{text}</div>;
                }
            }
        }, {
            title: '规格',
            dataIndex: 'specification',
            width: '6%',
            render: (text, record) => {
                if (record.beactive == "N") {
                    return <div className='rowchangecolor'>{text}</div>;
                } else {
                    return <div>{text}</div>;
                }
            }
        }, {
            title: '包装',
            dataIndex: 'packing',
            width: '4%',
            render: (text, record) => {
                if (record.beactive == "N") {
                    return <div className='rowchangecolor'>{text}</div>;
                } else {
                    return <div>{text}</div>;
                }
            }
        }, {
            title: '生产厂家',
            dataIndex: 'manufacturer',
            width: '6%',
            render: (text, record) => {
                if (record.beactive == "N") {
                    return <div className='rowchangecolor'>{text}</div>;
                } else {
                    return <div>{text}</div>;
                }
            }
        }, {
            title: '品牌',
            dataIndex: 'brandname',
            width: '4%',
            render: (text, record) => {
                if (record.beactive == "N") {
                    return <div className='rowchangecolor'>{text}</div>;
                } else {
                    return <div>{text}</div>;
                }
            }
        }, {
            title: '有效期',
            dataIndex: 'effectivedate',
            width: '4%',
            render: (text, record) => {
                if (record.beactive == "N") {
                    return <div className='rowchangecolor'>{text != "" && text != null && text != undefined ? text + '个月' : ''}</div>
                } else {
                    return <div>{text != "" && text != null && text != undefined ? text + '个月' : ''}</div>
                }
            }
        }, {
            //     title: '储存',
            //     dataIndex: 'storage',
            //     width: '5%',
            //     render: (text, record) => {
            //         if (record.beactive == "N") {
            //             return <div className='rowchangecolor'>{text}</div>;
            //         } else {
            //             return <div>{text}</div>;
            //         }
            //     }
            // }, {
            title: '零售价',
            dataIndex: 'retailprice',
            width: '5%',
            render: (text, record) => {
                if (record.beactive == "N") {
                    return <div className='rowchangecolor'>{text}</div>;
                } else {
                    return <div>{text}</div>;
                }
            }
        }, {
            title: '库存',
            dataIndex: 'stock',
            width: '5%',
            render: (text, record) => {
                if (record.beactive == "N") {
                    return <div className='rowchangecolor'>{text}</div>;
                } else {
                    return <div>{text}</div>;
                }
            }
        }, {
            title: '状态',
            dataIndex: 'salestatus',
            width: '5%',
            render: (text, record) => {
                if (record.beactive == "N") {
                    if (text == '0') {
                        return <div className='rowchangecolor'>{'未发布'}</div>;
                    } else if (text == '1') {
                        return <div className='rowchangecolor'>{'上架区'}</div>;
                    } else if (text == '2') {
                        return <div className='rowchangecolor'>{'下架区'}</div>;
                    }
                } else {
                    if (text == '0') {
                        return <div>{'未发布'}</div>;
                    } else if (text == '1') {
                        return <div>{'上架区'}</div>;
                    } else if (text == '2') {
                        return <div>{'下架区'}</div>;
                    }
                }
            }
        }];
        const dataList = this.state.goodsinfolist.map((v, i) => {
            return {
                key: i + 1,
                productnumber: v.productnumber, //药品内码
                productname: v.productname,//药品名称
                categoryname: v.categoryname,//分类
                specification: v.specification, //规格
                packing: v.packing, //包装
                manufacturer: v.manufacturer,  //生产厂家
                brandname: v.brandname, //品牌
                effectivedate: v.effectivedate, //保质期
                storage: v.storage, //储存
                retailprice: v.retailprice,//零售价
                stock: v.stock,//库存
                salestatus: v.salestatus, //状态
            }
        });
        return (
            <Form>
                <div className='goods-label'>
                    <div className='goods-label-cont clearfix'>
                        <div className='goods-label-cont-nav clearfix'>
                            <Breadcrumb separator=">">
                                <Breadcrumb.Item>直销商品管理</Breadcrumb.Item>
                            </Breadcrumb>
                        </div>
                        <div className='member-content-Search clearfix'>
                            <div className='addetd addetd-z addetd-gjh'>
                                <FormItem>
                                    {
                                        getFieldDecorator('txt_Inkey',{
                                            initialValue:""
                                        })(
                                            <Input className='addetd-a-r' addonBefore="药品名称" placeholder="请输入" />
                                        )
                                    }
                                </FormItem>
                            </div>
                            <div className='addetd addetd-z addetd-gjh'>
                                <FormItem>
                                    {
                                        getFieldDecorator('txtx_Inkey',{
                                            initialValue:""
                                        })(
                                            <Input className='addetd-a-r' addonBefore="品牌" placeholder="请输入" />
                                        )
                                    }
                                </FormItem>
                            </div>
                            <div className='addetd addetd-bb indtner'>
                                <InputGroup compact>
                                    <Input addonBefore="分 类" />
                                    <TreeSelect
                                        style={{ width: 210 }}
                                        value={this.state.categoryid}
                                        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                                        treeData={this.state.categoryData}
                                        placeholder="请选择"
                                        treeDefaultExpandAll
                                        onChange={(value) => this.changeCategory(value)}
                                    />
                                </InputGroup>
                            </div>
                            <div className='addetd addetd-a indtner  pont-a'>
                                <InputGroup compact>
                                    <Input addonBefore="商品状态" />
                                    <Select value={this.state.salestatus} onChange={this.salestatusChange.bind(this)}>
                                        <Option value="">全部</Option>
                                        <Option value="0">未上架</Option>
                                        <Option value="1">已上架</Option>
                                        <Option value="2">已下架</Option>
                                    </Select>
                                </InputGroup>
                            </div>
                            <Button type="primary" style={{ marginLeft: 50 }} className='member-button' icon="search" onClick={this.SearchProductInfoBtn.bind(this)}>搜索</Button>
                            <Button type="primary" className='member-button' icon="reload" onClick={this.ResetBtn.bind(this)}>重置</Button>
                        </div>
                        <div className='allgoods-table clearfix'>
                            <Table
                                columns={columns}
                                dataSource={dataList}
                                pagination={false}
                                bordered
                            />
                        </div>

                        <div className='goods-label-let'>
                            <div className="floor-ppagi">
                                {
                                    this.state.goodsinfocount == 0 ?
                                        <p className="floor-ppagip">
                                            共{this.state.goodsinfocount}条记录
                                </p> :
                                        <p className="floor-ppagip">
                                            当前显示
                                    {this.state.pagesize * (this.state.pageindex - 1) + 1}—
                                    {this.state.pagesize * this.state.pageindex < this.state.goodsinfocount ? this.state.pagesize * this.state.pageindex : this.state.goodsinfocount}条记录，
                                    共{this.state.goodsinfocount}条记录
                                </p>
                                }
                                <Pagination
                                    current={this.state.pageindex}
                                    total={this.state.goodsinfocount || 1}
                                    defaultPageSize={this.state.pagesize}
                                    onChange={this.changePage.bind(this)}
                                    showSizeChanger
                                    pageSizeOptions={['20', '50', '100']}
                                    onShowSizeChange={(current, pageSize) => this.handleSizeChange(current, pageSize)}
                                />
                            </div>
                        </div>
                    </div>
                </div>
            </Form>
        )
    }
}

const CrmGood = Form.create()(CrmGoodForm);
export default CrmGood;